<template>
    <div>
        <n-space vertical>
            <n-form
                :model="formValue"  size="small" label-placement="left" :inline="true"  label-width="100px"
            >
                <n-form-item label="互动名称">
                    <n-input
                        v-model:value="formValue.kname"
                        placeholder="请输入互动名称"
                        clearable
                    />
                </n-form-item>
                <n-form-item label="互动内容">
                    <n-input
                        v-model:value="formValue.knowledgeSeparator"
                        placeholder="请输入互动内容"
                        clearable
                    />
                </n-form-item>

                <n-form-item label="软删除">
                    <n-input
                        v-model:value="formValue.retrieveLimit"
                        placeholder="请输入互动内容"
                        clearable
                    />
                </n-form-item>
                <n-form-item>
                    <n-button type="primary" icon="el-icon-search">搜索</n-button>
                    <span class="ml-2">
                        <n-button icon="el-icon-refresh">重置</n-button>
                    </span>
                </n-form-item>
            </n-form>
            <n-space :gutter="10" class="mb8">
                <n-button
                    type="primary"
                    plain
                    icon="el-icon-plus"
                    @click="handleAdd"
                >新增
                </n-button>
                <n-button
                    type="success"
                    plain
                    icon="el-icon-edit"
                    :disabled="single"
                    @click="handleUpdate"
                >修改
                </n-button>
                <n-button
                    type="danger"
                    plain
                    icon="el-icon-delete"
                    :disabled="multiple"
                    @click="handleDelete"
                >删除
                </n-button>
                <n-button
                    type="warning"
                    plain
                    icon="el-icon-download"
                    @click="openPublishDialog"
                >运行
                </n-button>
            </n-space>
        </n-space>
        <div class="mt-4" style="width: 98%">
            <n-data-table
                :loading="loading"
                :data="noteList"
                @update:checked-row-keys="handleSelectionChange"
                :columns="columns"
                style="width: 100%"
            />
        </div>
    </div>
</template>

<script setup lang="ts">
import { h, onMounted, reactive, ref } from "vue";
import {listInteraction} from '@/api/user'
import {
    NButton,
    NDataTable,
    DrawerPlacement,
    NDrawer,
    NDrawerContent,
    NForm,
    NFormItem,
    NInput,
    // NDivider,
    NSpace,
    useMessage,
    NGrid,
    NGi,
    NSwitch,
    NInputNumber,
    NSelect,
} from "naive-ui";

const formValue = ref({
    interactionName: "", // 知识库id
    interactionInfo: "", // 附件id
    isDel: "", // 用户id
    pageNum: 1,
    pageSize: 10,
});

const noteList = ref([]);
const loading = ref(true);
const total = ref(0);

// 定义表格列
const columns = ref([
    {
        type: 'selection',
        disabled(row: RowData) {
            return row.name === 'Edward King 3'
        }
    },
    {
        title: '创建时间',
        key: 'createTime'
    },
    {
        title: '互动名称',
        key: 'interactionName'
    },
    {
        title: '内容鉴定师数字员工',
        key: 'auditorId'
    },{
        title: '咨询师数字员工',
        key: 'employeeId'
    },{
        title: '互动内容',
        key: 'interactionInfo'
    },{
        title: '工作流',
        key: 'flowableId'
    },{
        title: '关键词',
        key: 'keyword'
    },
    {
        title: '操作',
        key: 'actions',
        width: 150,
        fixed: 'right',
        render(row) {
            return h('div', [
                h(NButton, {
                    size: 'small',
                    onClick: () => handleUpdate(row)
                }, '编辑'),
                h(NButton, {
                    size: 'small',
                    style: 'margin-left: 8px',
                    onClick: () => handleDelete(row)
                }, '删除')
            ]);
        }
    }
]);

const getList = () => {
    loading.value = true;
    listInteraction(formValue.value).then(response => {
        noteList.value = response.rows;
        total.value = response.total;
        loading.value = false;
    });
};

onMounted(() => {
    getList();
});
</script>
